<template>
  <div class="my">
    <!-- 头部 -->
    <header>
      <div class="login login-registerr banner" v-if="isLogin">
        <div class="login-info"></div>
        <div class="login-info">
          <div class="login-zhongjian" @click="$router.push('/login')">
            <div class="imgspan">
              <van-image
                round
                width="1.5rem"
                height="1.5rem"
                :src="UserInfo.photo"
              />
              <span>{{ UserInfo.name }}</span>
            </div>
            <van-button round size="mini" @click="$router.push('/user')"
              >编辑资料</van-button
            >
          </div>
        </div>
        <div class="login-info">
          <van-row>
            <van-grid :border="false">
              <van-grid-item class="grid-item"
                >0<span>头条</span></van-grid-item
              >
              <van-grid-item class="grid-item"
                >0<span>粉丝</span></van-grid-item
              >
              <van-grid-item class="grid-item"
                >0<span>关注</span></van-grid-item
              >
              <van-grid-item class="grid-item"
                >0<span>获赞</span></van-grid-item
              >
            </van-grid>
          </van-row>
        </div>
      </div>
      <div class="logout" v-else>
        <header>
          <div class="login-register banner" @click="$router.push('/login')">
            <img src="../../assets/images/mobile.png" alt="" class="img" />
            <span class="login-text">登录 / 注册</span>
          </div>
        </header>
      </div>
    </header>

    <!-- 中间 -->
    <main>
      <!-- 收藏 历史 -->
      <van-grid
        clickable
        :column-num="2"
        class="grid van-grid van-hairline--top"
      >
        <van-grid-item
          icon="star-o"
          class="van-item1"
          style="color: #ed5253"
          text="收藏"
        />
        <van-grid-item
          icon="underway-o"
          class="van-item1"
          style="color: #ffb31d"
          text="历史"
        />
      </van-grid>

      <!-- 消息 小智 -->
      <div class="link">
        <van-cell title="消息通知" is-link />
        <van-cell title="小智同学" is-link />
      </div>
    </main>

    <!-- 底部退出 -->
    <footer>
      <van-button size="large" v-if="isLogin" @click="logout" class="logout-btn"
        >退出</van-button
      >
    </footer>
  </div>
</template>

<script>
import { getUserInfo } from '@/api'
export default {
  name: 'My',
  data() {
    return {
      UserInfo: {}
    }
  },
  computed: {
    isLogin() {
      return !!this.$store.state.tokenObj.token
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    logout() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否确定退出',
          confirmButtonText: '退出'
        })
        .then(() => {
          // on confirm
          this.$store.commit('SET_TOKEN', '')
          this.loading()
        })
        .catch(() => {
          // on cancel
        })
    },
    async getUserInfo() {
      try {
        const { data } = await getUserInfo()
        this.UserInfo = data.data
        // console.log(data)
      } catch (error) {
        this.$toast.fail('获取用户信息失败，请刷新')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my {
  background-color: #f5f7f9;
  height: calc(100vh - 1.33333rem);
}
.login {
  display: flex;
  flex-direction: column;
  .login-info {
    flex: 1;
    .login-zhongjian {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
:deep(.login-registerr) {
  display: flex;
  .imgspan {
    margin-left: 60px;
    .van-image--round {
      vertical-align: middle;
    }
    span {
      font-size: 0.4rem;
      color: #fff;
      margin-left: 18px;
    }
  }
  .van-button--mini {
    width: 1.6rem;
    height: 0.43667rem;
    color: #666;
    margin-right: 30px;
    .van-button__text {
      font-size: 0.266rem;
    }
  }
}
:deep(.login-register) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .img {
    width: 1.76rem;
    height: 1.76rem;
  }
  .login-text {
    color: #fff;
    font-size: 0.4rem;
    margin-top: 0.26667rem;
  }
}
:deep(.banner) {
  width: 100%;
  height: 5.33333rem;
  background: url('/src/assets/images/banner.png') no-repeat 50% / cover;
}
:deep(.gird) {
  color: #645566;
}
:deep(.van-grid-item__icon) {
  font-size: 0.62rem;
}
:deep(.van-grid-item__icon + .van-grid-item__text) {
  margin-top: 0.1rem;
}
.link {
  margin: 0.13333rem 0;
}
.logout-btn {
  color: red;
  border: 0;
}
.van-button--block {
  display: block;
  width: 100%;
}

:deep(.van-button--normal) {
  padding: 0 0.4rem;
  font-size: 0.37333rem;
}
.van-button--default {
  background-color: #fff;
}
.van-button__text {
  font-size: 0.37333rem;
}
:deep(.van-grid-item__content) {
  font-size: 15px;
  background-color: inherit;
}
:deep(.grid-item) {
  background-color: inherit;
  color: #fff;
}
:deep(.van-item1) {
  background-color: #fff;
}
</style>
